import React,{Component} from 'react'

import{
    Image,
    Text,
    View,
    StyleSheet,
    ActivityIndicator,
    FlatList,
    ToastAndroid,
    Dimensions,
    TouchableHighlight
}from 'react-native'


import DatePicker from 'react-native-datepicker'
    


const { width, height } = Dimensions.get('window');

const uiwidth=(width-30)/2

const styles=StyleSheet.create({
     warp:{
         width:'100%',
         backgroundColor:'white',
         flexDirection:'row',
         justifyContent:'space-around',
         flexWrap:'wrap'
     },
     bottom:{
       position:"absolute",
       bottom:0,
       width:'100%',
       height:30,
       flexDirection:'row',
       justifyContent:'space-around',
       alignItems:'center',
       backgroundColor:'white',
       borderTopWidth:1,
       borderColor:'#ddd'
     },
     singui:{
         width:uiwidth,
         paddingTop:30,
         flexDirection:'column',
         alignItems:'center'
     },
     imgui:{
         width:'80%',
         height:40
     },
     topwarp:{
       width:'100%',
       borderBottomWidth:1,
       borderColor:'#ddd',
       height:50,
       flexDirection:'row',
       justifyContent:'space-around',
       alignItems:'center',
       backgroundColor:'white',
       shadowColor:"black",
       shadowOpacity:0.5,
       shadowRadius:2,
       shadowOffset:{h:10,w:10}
     },
     jiange:{
        width:'100%',
        borderTopWidth:1,
        borderColor:'rgba(150,150,150,0.2)',
        height:1
    },
     itemwarp:{
       width:'100%',
       height:100,
       paddingLeft:10,
       flexDirection:'column',
       justifyContent:"space-around",
       alignItems:'center',
       paddingRight:10
     },
     item:{
       width:'100%',
       height:25,
       justifyContent:'space-between',
       flexDirection:'row',
       alignItems:'center'
     },
     content:{
       width:'100%',
       height:height-130
     }
})


const testdata=[1,2,3,4,6,6,6,6,6,6,6]


export default class Chartreport extends Component{
    static navigationOptions={
        title:'对账单',
        headerTitleStyle: {
        alignSelf:'center'
      },
        headerRight: (
        <Text></Text>
        ),
    };
    
    constructor(props){
    super(props)
    this.state = {
      datebegin:"2017-05-15",
      dateend:"2019-05-12",
      data:[],
      over:false,
      refreshing: false,
      pagesize:1
      }
  }

refreshing = false;

      getsmalldate=function(){
        var date = new Date();
      this.year = date.getFullYear();
      this.month = date.getMonth() + 1;
      this.date = date.getDate();
      this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
      var currentTime =this.year + "-" + this.month + "-" + this.date;
      return currentTime
      }	
      
      fetchData=async function(i){
        if (this.refreshing) {
          return;
        }
        this.setState({
          refreshing: true,
        });
        let response = await fetch(global.mainurl+"bossHelper/getSellerStatment?sellerid="+global.sellerid+"&userid="+global.userdata.id+"&token="+global.token+"&&pageNo=100&&pageSize="+i+"&&startDate="+this.state.datebegin+"%2014:32:12&&endDate="+this.state.dateend+"%2014:32:12");
         console.log(response)
         var result=await response.json()
         console.log(result)
         this.setState({
          refreshing: false,
        });
        this.refreshing = false;
         if(result.code==1){
         return result.data
         }
      }



      freshData = async () => {
        alert(this.state.datebegin)
        alert(this.state.dateend)
        var data1=await this.fetchData(1);
          this.setState({
            data: data1,
            pagesize:1,
            
          });
       
      };

      fetchMore = async () => {
        if (!this.state.over) {
          var data1= await this.fetchData(++this.state.pagesize);
          ToastAndroid.show('加载更多', 1000)
          this.setState({
            data: this.state.data.concat(data1),
            pagesize:++this.state.pagesize
          });
           if(data1.length!=100){
          this.setState({
            over:true
            })
          }
        }
        else{
           ToastAndroid.show('已加载全部数据', 1000)
        }
       
      };

      async componentWillMount(){
        this.setState({
          dateend:this.getsmalldate()
        })
        var data1= await this.fetchData(1)
        console.log(data1)
        this.setState({
          data:data1
        })
      }
        
    render(){
    return (
      <View style={styles.warp}>
      <View style={styles.topwarp}>
      <DatePicker
        style={{width: 130}}
        date={this.state.datebegin}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate={this.state.today}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36,
            borderRadius:8
          }
        }}
        onDateChange={(date) => {this.setState({datebegin: date});this.freshData()}}
      />
      <Text>至</Text>
      <DatePicker
        style={{width: 130}}
        date={this.state.dateend}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2019-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36,
            borderRadius:8
          }
        }}
        onDateChange={(date) => {this.setState({dateend: date});this.freshData()}}
      />
      </View>
 
      <View style={styles.content}>
      <FlatList
        keyExtractor={(item, index) => index}
        data={this.state.data}
        onRefresh={this.freshData}
        onEndReached={this.fetchMore}
        refreshing={this.refreshing}
        ItemSeparatorComponent={()=>{
                return(
                    <View style={styles.jiange}/>
                    )
                
            }}
        style={styles.list}
        ListFooterComponent={() => {
                return this.state.refreshing &&
                  <ActivityIndicator size="large" />
              }}
        renderItem={
          (item)=>{
            return (
              <View style={styles.itemwarp}>
               <View style={styles.item}>
               <Text>{item.item.createDate}</Text>
               <Text>名义餐厅</Text>
               </View>

               <View style={styles.item}>
               <Text>总金额</Text>
               <Text>{item.item.paidPrice}</Text>
               </View>

               <View style={styles.item}>
               <Text>商家优惠</Text>
               <Text>{(item.item.totalPrice-item.item.paidPrice).toFixed(2)}</Text>
               </View>

               <View style={styles.item}>
               <Text>{item.item.rulePrice}</Text>
               <Text>1</Text>
               </View>
               
              </View>
            )
          }
        }
      />
      </View>
      {
      /*<View style={styles.bottom}>
        <Text>总收入：123.00</Text><Text>总服务费:23.03</Text>
      </View>*/
      }
      </View>
      
    )
  }
    
}